<template>
  <div>
    <div class="flex-start">
      <el-date-picker
        class="m-r-10"
        size="small"
        v-model="searchDate"
        type="daterange"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="query"
      />
      <el-input
        size="small"
        class="m-r-10"
        style="width: 300px"
        placeholder="请输入搜索关键字"
        v-model="search.queryWord"
        clearable
        @change="query"
      />
    </div>
    <el-table
      class="my-table m-t-20"
      :data="data"
      v-loading="loading"
      style="width: 100%"
      border
      :header-cell-style="{ background: '#eee', color: '#000' }"
    >
      <el-table-column type="index" align="center" label="序号" width="60" />
      <el-table-column prop="recordCode" label="加注单号" min-width="140" />
      <el-table-column prop="macCode" label="加注机编号" min-width="120" />
      <el-table-column
        prop="actualWeight"
        label="实际加注量（kg）"
        width="180"
      />
      <el-table-column
        prop="moneyFill"
        label="实际加注金额（元）"
        width="180"
      />
      <el-table-column prop="carNo" label="车牌号" width="100" />
      <el-table-column prop="cardNo" label="电子卡号" width="120" />
      <el-table-column prop="shootCardNo" label="加注卡号" width="120" />
      <el-table-column prop="wxNickName" label="司机姓名" width="120" />
      <el-table-column label="车辆照片" width="120">
        <template v-slot="scope">
          <img
            style="width: 50px; height: 50px"
            alt="加载失败"
            :src="scope.row.carPhoto"
            @click="showImage(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="finishTime" label="加注时间" width="180" />
    </el-table>
    <div class="flex-center m-t-10">
      <div class="flex-start f-s-16 flex-align-items-unset">
        <div class="m-r-10">加注总量(kg)</div>
        <div class="f-s-20 m-r-20 f-w-600" style="color: #1e9fff">
          {{ summaryDetail.fillActualWeight | defaultValue }}
        </div>
        <div class="m-r-10">加注总金额(元)</div>
        <div class="f-s-20 m-r-20 f-w-600" style="color: #1e9fff">
          {{ summaryDetail.fillTotalMoney | defaultValue }}
        </div>
      </div>
      <app-pagination
        ref="paginationRef"
        :total="total"
        :page-size="page.size"
        class="m-t-20"
        @change="pageChange"
      />
    </div>

    <el-dialog
      title="查看图片"
      append-to-body
      :visible.sync="showImgFlag"
      width="90%"
    >
      <div class="flex-center">
        <div></div>
        <img :src="currRow.carPhoto" />
        <div></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import LicensePlateNumberSelect from "@/components/business/license-plate-number-select";
import AppPagination from "@/components/business/app-pagination";

import {
  getRecords,
  getRespData,
  getTotal,
  isListEmpty,
  isStringBlank,
} from "@/util/common-util";
import { getPage, summaryByTeam } from "@/api/business/filling-record-user";

export default {
  name: "contract-customer-detail-filling-record-tab",
  components: { AppPagination, LicensePlateNumberSelect },
  props: ["id"],
  data() {
    return {
      page: {
        size: 20,
        current: 1,
      },
      showImgFlag: false,
      total: 0,
      search: {
        startTime: "",
        endTime: "",
        queryWord: "",
        carNo: "",
        teamId: "",
      },
      searchDate: "",
      showSearchFlag: true,
      loading: false,
      data: [],
      summaryDetail: {},
      currRow: {},
    };
  },
  created() {
    this.search.teamId = this.id;
    this.query();
  },
  methods: {
    showImage(row) {
      this.showImgFlag = true;
      this.currRow = row;
    },
    cardNoChange(v) {
      this.search.carNo = v;
      this.query();
    },
    query() {
      this.loading = true;

      if (isListEmpty(this.searchDate)) {
        this.search.startTime = "";
        this.search.endTime = "";
      } else {
        this.search.startTime = this.searchDate[0];
        this.search.endTime = this.searchDate[1];
        if (!isStringBlank(this.search.endTime)) {
          this.search.endTime = this.search.endTime.replace(
            "00:00:00",
            "23:59:59"
          );
        }
      }
      getPage(this.page, this.search)
        .then((res) => {
          this.data = getRecords(res);
          this.total = getTotal(res);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
      this.summary();
    },
    summary() {
      summaryByTeam(this.id, this.search).then((res) => {
        this.summaryDetail = getRespData(res);
      });
    },
    pageChange(_page) {
      this.page = _page;
      this.query();
    },
  },
};
</script>

<style lang="scss" scoped>
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>
